<template>
  <div class="bank-card-unbind-wrap">

    <div class="auth_tx_bck" v-if="showPage == 1">
      <div class="popup_box">
        <div class="popup_top" @click="closeKey"><img src="../../../images/close_draw.png" class="close"
                                                      onclick="return false"></div>
        <div class="pop_u_box">
          <div class="pop_f">请输入提现密码</div>
          <div class="pop_moy">换绑银行卡，请先输入提现密码，完成身份验证</div>
        </div>
        <div class="pop_mpb">
          <div class="p_m_list" v-for="i in items" :class="password[i]?'mmdd':''"></div>
        </div>
        <div class="pop_moy" @click="forgetDrawPwd">忘记密码？</div>
      </div>
      <div class="numb_box">
        <div class="xia_q_tb">
          <img src="../../../images/pull.jpg" class="pull" onclick="return false">
        </div>
        <ul class="nub_ggg">
          <li @click="keyUpHandle($event)" v-for="val in keys" v-if="val!='清空'">
            <a href="javascript:void(0);">{{ val }}</a>
          </li>
          <li v-else @click="clearPwdHandle">
            <a href="javascript:void(0);">清空</a>
          </li>
          <li @click="delHandle">
            <a href="javascript:void(0);">删除</a>
          </li>
        </ul>
      </div>
    </div>

    <div class="safe-code-box" v-if="showPage == 2">
      <img src="../../../images/safe.png" class="safe"/>
      <span class="safe-title">换绑银行卡，请先输入提现密码，完成身份验证</span>
      <button class="safe-opt" type="button" @click="openSafe">立即验证</button>
    </div>

    <v-dialog v-model="sendVal" :content="content" cancelText="取消" confirmText="重试" @confirm="confirm"
              @cancel="cancel"></v-dialog>
    <v-dialog v-model="modalVal" :content="modal" type="default" @sure="sure"></v-dialog>

  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import md5 from 'js-md5'
  import dialog from "../../../components/dialog";
  import {updateWithDraw} from "../../../axios/api";
  import {salt} from "../../../config/env";

  const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, "清空", 0];

  export default {
    data() {
      return {
        showPage: 1,
        items: [0, 1, 2, 3, 4, 5],
        password: [],
        keys: keys(),
        modal: "",
        content: "",
        sendVal: false,
        modalVal: false,
        userMark: "",
        certNum: this.$route.query.certNum,
        userName: this.$route.query.userName
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
    },
    methods: {
      closeKey() {//关闭密码键盘
        this.showPage = 2;
        this.password = [];
      },
      forgetDrawPwd() {
        sessionStorage.setItem("proxy_mark_01", "8001");//系统手机号
        this.$router.push({
          path: "/authDrawPwd", query: {
            "certNum": this.certNum,
            "userName": this.userName
          }
        });
      },
      keyUpHandle(e) {
        let text = e.currentTarget.innerText;
        let len = this.password.length;
        if (!text || len >= 6) return;
        this.password.push(text);
        this.withPwdCheck();
      },
      delHandle() {//删除
        if (this.password.length <= 0)
          return false;
        this.password.pop();
      },
      clearPwdHandle() {//清空
        this.password = [];
      },
      openSafe() {//打开密码框
        this.showPage = 1;
      },
      confirm() {//重试
        this.sendVal = false;
        this.password = [];
      },
      cancel() {//取消
        this.sendVal = false;
        this.password = [];
      },
      sure() {//提现密码错误次数过多
        this.modalVal = false;
        this.$router.push("/mine");
      },
      withPwdCheck() {//提现密码校验
        if (this.password.length >= 6) {
          let withPwd = this.password.join(' ').replace(/\s/g, '');
          if (localStorage.getItem("sess_time_local") == 3 && Cookies.get("sess_time_local") == null) {//判断本地存储密码次数为3次并且cookie中存储的值为null时,就把本地存储的次数清除(cookie10分钟失效后要把本地存储的密码次数删除)
            localStorage.removeItem("sess_time_local");
          }
          let sess_time = localStorage.getItem("sess_time_local"); //当前密码错误次数就等于本地存储的次数,牵扯到提现密码的页面都会记录并且每次叠加,直接赋值
          if (Cookies.get("sess_time_local") == 3) { //密码错误次数过多
            this.modalVal = true;
            this.modal = "提现密码错误次数过多,请十分钟后再试";
            return;
          } else {
            this.$vux.loading.show({
              text: '加载中',
            });

            let params = {
              "sgin": this.userMark,
              "oldPwd": md5(md5(withPwd) + salt),
              "type": 1,
              "withdrawPwd": ""
            };
            updateWithDraw(params).then((res) => {
              this.$vux.loading.hide();
              if (res.code == 0 && res.data == 1) {
                this.$router.push({
                  path: "/bankUnBindProcess2",
                  query: {"certNum": this.certNum, "userName": this.userName}
                });
              } else {//身份验证失败,记录错误提现密码次数
                sess_time++;
                localStorage.setItem("sess_time_local", sess_time);
                if (sess_time == 3) { //错误次数达到3次
                  let date = new Date();
                  date.setTime(date.getTime() + 60 * 1000 * 10); //过期为10分钟
                  Cookies.set('sess_time_local', sess_time, {expires: date, path: ''});
                  this.modalVal = true;
                  this.modal = "提现密码错误次数过多,请十分钟后再试";
                } else { //密码错误次数提醒
                  this.sendVal = true;
                  this.content = "提现密码错误,请重试(还剩" + parseInt(3 - sess_time) + "次机会)"
                }
              }
            });
          }
        }
        return false
      }
    },
    components: {
      "v-dialog": dialog
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .bank-card-unbind-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .safe-code-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      .wh(100%, auto);
      .safe {
        .wh(3.467rem, 3.467rem);
        padding-top: 2.933rem;
        padding-bottom: 0.613rem;
      }
      .safe-title {
        margin-left: 2.213rem;
        margin-right: 2.213rem;
        .size-color(0.373rem, rgba(153, 153, 153, 1));
        text-align: center;
        margin-bottom: 1.32rem;
        line-height: 0.44rem;
      }
      .safe-opt {
        .wh(4.267rem, 1.28rem);
        border-radius: 0.16rem;
        background: rgba(60, 175, 255, 1);
        .size-color(0.453rem, rgba(255, 255, 255, 1));
      }
    }
    .auth_tx_bck {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 100;
      background-color: rgba(0, 0, 0, 0.5);
      .popup_box {
        margin: 10.54% auto 0;
        .wh(92.53%, auto);
        background: rgba(255, 255, 255, 1);
        border-radius: 0.16rem;
        .popup_top {
          display: flex;
          padding-top: 0.293rem;
          padding-right: 0.293rem;
          margin-left: auto;
          .wh(0.48rem, 0.48rem);
          .close {
            .wh(100%, 100%)
          }
        }
        .pop_u_box {
          margin-bottom: 0.2rem;
          .wh(100%, auto);
          color: rgba(27, 27, 27, 1);
          .pop_f {
            display: flex;
            justify-content: center;
            margin-bottom: 0.32rem;
            .size-color-weight(0.48rem, rgba(51, 51, 51, 1), 500);
          }
          .pop_moy {
            margin: 0 auto;
            .wh(6.467rem, auto);
            line-height: 0.48rem;
            .size-color(0.4rem, rgba(153, 153, 153, 1));
          }
        }
        .pop_mpb {
          margin: 0 auto;
          .wh(90%, 1.333rem);
          border: 1px solid rgba(224, 224, 224, 1);
          .p_m_list {
            float: left;
            .wh(16.35%, 100%);
            border-right: 1px solid rgba(224, 224, 224, 1);
            &:last-child {
              border-right: 0rem;
            }
          }
          .mmdd {
            display: inline-block;
            background: #FFF url("../../../images/dark.jpg") center no-repeat;
            background-size: 25%;
          }
        }
        .pop_moy {
          padding-top: 0.4rem;
          padding-bottom: 0.4rem;
          text-align: center;
          .size-color(0.44rem, #3CAFFF);
        }
      }
      .numb_box {
        position: fixed;
        bottom: 0;
        .wh(100%, auto);
        background: #f5f5f5;
        .xia_q_tb {
          display: table;
          text-align: center;
          margin: 0 auto;
          padding: 0.067rem 0rem;
          border-top: 1px solid #dadada;
          .pull {
            width: 0.533rem;
            height: 0.333rem;
            margin-top: 0.183rem;
          }
        }
        .nub_ggg {
          border-top: 1px solid #dadada;
          width: 100%;
          margin-top: 0.133rem;
          overflow: hidden;
          li {
            width: 33.33%;
            border-bottom: 1px solid #dadada;
            float: left;
            text-align: center;
            font-size: 0.426666rem;
            a {
              display: block;
              color: #000;
              height: 1.2rem;
              line-height: 1.2rem;
              overflow: hidden;
              &:active {
                background: #e0e0e0;
              }
              &:nth-child(1) {
                border-right: 1px solid #dadada;
              }
            }
          }
        }
      }
    }
  }
</style>


